<template>
	<Layout>
		<div class="rwt-portfolio-details rn-section-gap">
			<div class="container">
				<div class="row">
					<div class="col-lg-10 offset-lg-1">
						<div class="inner">
							<div class="details-list">
								<div class="thumbnail alignwide">
									<img class="radius w-100" :src="portfolio.result" alt="Image" />
								</div>
								<div class="row mt--40 row--30">
									<el-row>
										<el-col :span="12">
											<div>
												<div class="content-left">
													<h4 class="title">{{ portfolio.typeZh }}</h4><!-- name -->
													<div class="single-list-wrapper">
														<div class="single-list">
															<label>编号:</label>
															<span>{{ portfolio.id}}</span>
														</div>
														<div class="single-list">
															<label>时间:</label>
															<span>{{ portfolio.time }}</span><!-- time -->
														</div>
													</div>
												</div>
											</div>
										</el-col>
										<el-col :span="12">
											<center>
												<div class="button-group mt--20"  @click="downloadImage(portfolio.id)" data-aos="fade-up" data-aos-delay="100">
													<Button title="下载图片" size="extra-large" icon="download" />
												</div>
											</center>
										</el-col>
									</el-row>
								</div>
							</div>
								<div class="col-lg-10 offset-lg-1" style="margin-top: 50px;">
									<SectionTitle
										subtitle="source image"
										title="来源图片"
										data-aos="fade-up"
									/>
								</div>
                            <div class="portfolio-gallery mt--40">
                                <div class="gallery mt--30">
                                    <div class="thumbnail">
<!--										<thumbnail :file="null" :imgsrc="file1" v-if="isshow===1"></thumbnail>-->
                                        <img class="radius w-100" :src="file1"/>
                                    </div>
                                </div>
                                <div class="gallery mt--30">
                                    <div class="thumbnail">
                                        <img class="radius w-100" :src="file2"/>
                                    </div>
                                </div>
                            </div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</Layout>
</template>

<script>
	import Layout from '../components/common/Layout'
	import PortfolioItemMixin from '../mixins/PortfolioItemMixin.js'
	import Button from '../components/elements/button/Button.vue'
	import SectionTitle from '../components/elements/sectionTitle/SectionTitle.vue'
	import Tiff from 'tiff.js';
	export default {
		name: 'PortfolioDetailsPage',
		components: {
			Layout,
			Button,
			SectionTitle
		},
		mixins: [PortfolioItemMixin],
		data() {
			return {
				id: this.$route.params.id,
				portfolio: {},
				portfolioItems: [],
				file1: "",
				file2: "",
				// isshow: 0,
				// isshow2 :0,
			}
		},

		created() {
			this.getImage(this.id)
			console.log(this.portfolio)
		},
		methods: {
			getImage(portfolioId) {
				var that = this;
				that.$axios.get(this.$global.apiUrl + 'record/getAll?userId='+this.$ls.get('userInfo').id)
					.then(res => {
						var imageData = res.data.data;
						/* console.log(imageData); */
						that.portfolioItems = imageData;
						let a = parseInt(portfolioId)

						console.log("portfolioId",portfolioId)
						this.portfolio = imageData.find(item => item.id === a);
						console.log(this.portfolio)
						this.file1 = this.portfolio.file1;
						this.file2 = this.portfolio.file2;
						if(this.file1.indexOf(".tif")!==-1||this.file1.indexOf(".tiff")!==-1) {
							try {
								var xhr = new XMLHttpRequest();
								xhr.responseType = 'arraybuffer';
								xhr.open('GET', this.file1);
								xhr.onload = (e) => {
									var tiff = new Tiff({ buffer: xhr.response });
									var canvas = tiff.toCanvas();
									this.file1 = canvas.toDataURL();
								};
								xhr.send();
							}catch (e) {
								// this.src = this.file.url;
							}
						}
						this.$nextTick(()=>{
							if(this.file2.indexOf(".tif")!==-1||this.file2.indexOf(".tiff")!==-1) {
								try {
									var xhr = new XMLHttpRequest();
									xhr.responseType = 'arraybuffer';
									xhr.open('GET', this.file2);
									xhr.onload = (e) => {
										var tiff = new Tiff({ buffer: xhr.response });
										var canvas = tiff.toCanvas();
										this.file2 = canvas.toDataURL();
									};
									xhr.send();
								}catch (e) {
									// this.src = this.file.url;
								}
							}
						})

						this.portfolio.time=this.portfolio.time.replace('T',' ')
						switch (this.portfolio.type) {
							case 'objectExtraction':
								this.portfolio.typeZh='目标提取 '+this.portfolio.type
								break
							case 'changeDetection':
								this.portfolio.typeZh='变化检测 '+this.portfolio.type
								break
							case 'objectDetection':
								this.portfolio.typeZh='目标检测 '+this.portfolio.type
								break
							case 'terrainClassification':
								this.portfolio.typeZh='地物分类 '+this.portfolio.type
								break
							default:break
						}
					})
					.catch(function(error) {
						console.log(error);
					});
			},
			downloadImage(portfolioId){
				console.log("Button-this.id",portfolioId);
				var that = this;
				that.$axios.get(this.$global.apiUrl + 'record/getAll?userId='+this.$ls.get('userInfo').id)
					.then(res => {
						that.$message.success("下载成功！")
						var imageData = res.data.data;
						that.portfolioItems = imageData;
						let a = parseInt(portfolioId)
						this.portfolio = imageData.find(item => item.id == a);
						let image = new Image();// 解决跨域 Canvas 污染问题
						image.setAttribute("crossOrigin", "anonymous");
						image.onload = function () {
						  let canvas = document.createElement("canvas");
						  canvas.width = image.width;
						  canvas.height = image.height;
						  let context = canvas.getContext("2d");
						  context.drawImage(image, 0, 0, image.width, image.height);
						  let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
						  let a = document.createElement("a"); // 生成一个a元素
						  let event = new MouseEvent("click"); // 创建一个单击事件
						  a.download = "download.jpg"; // 设置图片名称
						  a.href = url; // 将生成的URL设置为a.href属性
						  a.dispatchEvent(event); // 触发a的单击事件
						};
						image.src = this.portfolio.result;
					})
					.catch(function(error) {
						console.log(error);
					});
			},
		}
	}
</script>
